import React, {Component} from 'react';
import {Alert, StyleSheet} from 'react-native';
// import {Navigation} from 'react-native-navigation';
import {
  Colors,
  Carousel,
  PageControl,
  Modal,
  View,
  Text,
  Assets,
} from 'react-native-ui-lib'; // eslint-disable-line
import {TestCase, TestSuite} from '@rnoh/testerino';

const BUTTONS_HIT_SLOP = {right: 5, left: 5, top: 10, bottom: 10};
interface ModalScreenProps {
  componentId: string;
}

interface State {
  currentPage: number;
}

export default class ModalScreen extends Component<ModalScreenProps, State> {
  static options() {
    return {
      topBar: {
        drawBehind: true,
        visible: false,
      },
    };
  }

  constructor(props: ModalScreenProps) {
    super(props);

    this.state = {
      currentPage: 0,
    };
  }

  closeScreen() {
    // Navigation.pop(this.props.componentId);
  }

  render() {
    return (
      <TestSuite name="Modal, Modal.TopBar">
        <TestCase itShould="例子:">
          <View padding-20>
            <View flex>
              <PageControl
                containerStyle={[styles.pageControl, styles.absoluteContainer]}
                numOfPages={5}
                currentPage={this.state.currentPage}
                color={Colors.grey10}
                size={15}
              />
              <Carousel
                onChangePage={currentPage => this.setState({currentPage})}
                containerStyle={{flex: 1}}>
                <View bg-green50 flex style={styles.page}>
                  <Modal.TopBar
                    title="modal title"
                    onCancel={() => this.closeScreen()}
                    onDone={() => Alert.alert('done')}
                    doneButtonProps={{
                      disabled: true,
                    }}
                  />
                  <View padding-20>
                    <Text text70>
                      This is an example of a custom modal top bar.
                    </Text>
                    <Text text70>
                      By default you get the &apos;x&apos; cancel icon and
                      &apos;save&apos; as done label
                    </Text>
                  </View>
                </View>

                <View bg-violet80 flex style={styles.page}>
                  <Modal.TopBar
                    title="another example"
                    subtitle="with a subtitle"
                    onCancel={() => Alert.alert('cancel')}
                    onDone={() => Alert.alert('done')}
                    cancelIcon={null}
                    cancelLabel="back"
                  />
                  <View padding-20>
                    <Text text70>
                      You can of course change it by changing the values of
                      cancelIcon, cancelLabel, doneIcon, doneLabel and other
                      props..
                    </Text>
                  </View>
                </View>

                <View bg-orange70 flex style={styles.page}>
                  <Modal.TopBar
                    title="last one"
                    onCancel={() => Alert.alert('cancel')}
                    onDone={() => Alert.alert('done')}
                    cancelIcon={null}
                    cancelLabel="back"
                  />
                  <View padding-20>
                    <Text text70>
                      Sending onDone/onCancel is required for rendering
                      done/cancel actions
                    </Text>
                  </View>
                </View>

                <View bg-grey70 flex style={styles.page}>
                  <Modal.TopBar
                    title="Custom Style"
                    onCancel={() => Alert.alert('cancel')}
                    onDone={() => Alert.alert('done')}
                    doneButtonProps={{color: Colors.orange30}}
                    cancelButtonProps={{
                      iconStyle: {tintColor: Colors.orange30},
                    }}
                  />
                  <View padding-20>
                    <Text text70>
                      use doneButtonProps/cancelButtonProps properties to have
                      custom behaviour or style for done/cancel actions
                    </Text>
                  </View>
                </View>

                <View bg-yellow80 flex style={styles.page}>
                  <Modal.TopBar
                    title="custom button"
                    rightButtons={[
                      {
                        label: 'save',
                        buttonProps: {
                          labelStyle: {color: Colors.yellow10, marginRight: 14},
                        },
                        onPress: () => Alert.alert('save'),
                      },
                      {
                        icon: Assets.icons.demo.settings,
                        onPress: () => Alert.alert('settings'),
                        buttonProps: {
                          hitSlop: BUTTONS_HIT_SLOP,
                          iconStyle: {tintColor: Colors.yellow10},
                        },
                      },
                    ]}
                    leftButtons={[
                      {
                        icon: Assets.internal.icons.x,
                        onPress: () => Alert.alert('back'),
                        buttonProps: {
                          hitSlop: BUTTONS_HIT_SLOP,
                          iconStyle: {tintColor: Colors.yellow10},
                        },
                      },
                    ]}
                  />
                  <View padding-20>
                    <Text text70>
                      This is an example for using the rightButtons and
                      leftButtons props for having more than one button each
                      side
                    </Text>
                  </View>
                </View>
              </Carousel>
            </View>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
  },
  pageControl: {
    zIndex: 1,
  },
  absoluteContainer: {
    position: 'absolute',
    bottom: 5,
    left: 20,
    right: 0,
  },
});
